<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-form ref="form">
				<el-form-item label="基金代码/简称/全称:">
					<el-input
						v-model.trim="form.fundName"
						@input="form.fundName = SpecialReplace(form.fundName, true)"
						type="text"
						size="small"
						placeholder="请输入"
					>
					</el-input>
				</el-form-item>

				<!-- <el-form-item label="流程类型:">
					<el-select v-model="form.flowType" clearable filterable placeholder="请选择" size="small">
						<el-option label="非关联产品发起" value="0"> </el-option>
						<el-option label="产品方案中发起" value="1"> </el-option>
					</el-select>
				</el-form-item> -->

				<el-form-item label="任免职类型:">
					<el-select v-model="form.approvalTypes" multiple clearable collapse-tags filterable placeholder="请选择" size="small">
						<el-option label="任职" value="0"> </el-option>
						<el-option label="免职" value="1"> </el-option>
						<el-option label="任免职" value="2"> </el-option>
					</el-select>
					<el-button
						@click="getListData(1)"
						type="primary"
						size="mini"
						style="margin-left: 15px"
						:disabled="seachLoading"
						:loading="seachLoading"
						:icon="seachLoading ? '' : 'el-icon-search'"
					>
						查 询</el-button
					>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<el-table
				:data="tableData"
				border
				style="width: 100%"
				:header-cell-style="{ background: '#FAFAFA' }"
				v-loading="seachLoading"
				element-loading-text="正在加载中，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column prop="fundCode" fixed label=" 基金代码" width="100"> </el-table-column>
				<el-table-column prop="fundName" fixed label="基金简称" width="220">
					<template slot-scope="scope">
						<hintCom property="fundName" :item="scope.row" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="fundFullName" fixed label="基金全称">
					<template slot-scope="scope">
						<hintCom property="fundFullName" :item="scope.row" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="propertyName" label="所管理资产名称">
					<template slot-scope="scope">
						<hintCom property="propertyName" :item="scope.row" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="status" label="流程状态" width="150" sortable>
					<template slot-scope="scope">
						<hintCom property="status" :item="scope.row" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="address" label="任免职类型" width="150">
					<template slot-scope="scope">
						<span v-if="scope.row.approvalType === '0'">任职</span>
						<span v-if="scope.row.approvalType === '1'">免职</span>
						<span v-if="scope.row.approvalType === '2'">任免职</span>
					</template>
				</el-table-column>
				<el-table-column prop="managerOaIdsName" label="任职人员" width="150">
					<template slot-scope="scope">
						<hintCom property="managerOaIdsName" :item="scope.row" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="dismissManagerOaIdsName" label="免职人员" width="150">
					<template slot-scope="scope">
						<hintCom property="dismissManagerOaIdsName" :item="scope.row" :index="scope.$index" />
					</template>
				</el-table-column>
				<!-- <el-table-column prop="appointDateConfirm" label="任职日期" width="110" sortable> </el-table-column>
				<el-table-column prop="disAppointDateConfirm" label="离职日期" width="110" sortable> </el-table-column>

				<el-table-column prop="noticeDate" label="任职公告日期" width="130" sortable> </el-table-column>
				<el-table-column prop="noticeDateRemoval" label="离职公告日期" width="130" sortable> </el-table-column>

				<el-table-column prop="companyResolutionDate" label="任职公司批复时间" width="160" sortable> </el-table-column>
				<el-table-column prop="compReslRemovalDate" label="离职公司批复时间" width="160" sortable> </el-table-column>

				<el-table-column prop="externalApprovalDate" label="任职协会批复时间" width="160" sortable> </el-table-column>
				<el-table-column prop="externalAppDateRemoval" label="离职协会批复时间" width="160" sortable> </el-table-column> -->
			</el-table>
			<el-pagination
				background
				:page-size="paging.size"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="paging.num"
				:page-sizes="paging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging.total"
			/>
		</el-main>
	</el-container>
</template>

<script>
import { flowSeachManager } from '@/api/productApi/fundManager'
import { SpecialReplace } from '@/utils/characters'
// import { getFundList } from '@/api/productApi/mechanism'
export default {
	name: 'FlowFundManager',
	data() {
		return {
			SpecialReplace,
			tableData: [],
			form: {
				managerFlowType: '0',
				approvalTypes: [],
				fundName: '',
				flowType: '0',
				sendFlag: '0'
			},
			paging: {
				// 分页配置
				// 显示的条目数
				size: 10,
				// 当前页数
				num: 1,
				total: 0,
				pages: 0,
				sizes: [10, 50, 100, 200]
			},
			seachLoading: false,
			fundList: [],
			managerList: [],
			userList: []
		}
	},

	async mounted() {
		this.getListData()
	},

	methods: {
		// 改变页数
		handleCurrentChange(val) {
			this.paging.num = val
			this.getListData()
		},

		// 改变条数
		handleSizeChange(val) {
            this.paging.num = 1
			this.paging.size = val
			this.getListData()
		},

		getListData(num) {
			if (SpecialReplace(this.form.fundName, false)) {
				return
			}
			if (num) {
				this.paging.num = 1
			}
			this.seachLoading = true
			flowSeachManager(this.form, this.paging)
				.then(res => {
					if (res.msgCode === 'Y') {
						res.data.body.forEach(item => {
							if (
								item.managerInfos &&
								Array.isArray(item.managerInfos) &&
								item.managerInfos.length &&
								item.managerInfos.some(items => items.approvalType.includes('0'))
							) {
								const managerOaIdsName = []
								item.managerInfos.forEach(fundMan => {
									if (fundMan.approvalType === '0') {
										managerOaIdsName.push(fundMan.managerName)
									}
								})
								item.managerOaIdsName = managerOaIdsName.join(',')
							}
							if (
								item.managerInfos &&
								Array.isArray(item.managerInfos) &&
								item.managerInfos.length &&
								item.managerInfos.some(items => items.approvalType.includes('1'))
							) {
								const dismissManagerOaIdsName = []
								item.managerInfos.forEach(fundMan => {
									if (fundMan.approvalType === '1') {
										dismissManagerOaIdsName.push(fundMan.managerName)
									}
								})
								item.dismissManagerOaIdsName = dismissManagerOaIdsName.join(',')
							}
						})
						this.tableData = res.data.body
						this.paging.total = res.data.page.total
					}
				})
				.finally(() => {
					this.seachLoading = false
				})
		}
	}
}
</script>
<style lang="scss"  scoped src='./index.scss'>
</style>

